<template>
  <el-card shadow="never">
    <el-button class="mb20" @click="$router.push({ name: 'evaluateMyPlan' })">返回</el-button>
    <el-row class="mb20">
      <finish-card ref="finishCard" />
    </el-row>
    <el-row :gutter="20" class="mb20">
      <el-col :span="4">
        <ul>
          <li v-for="(item,index) in targetArr" :key="index">
            <p class="mb0">
              考评对象：
              <el-button @click="handleClick(item)" type="text">{{item.name}}</el-button>
            </p>
          </li>
        </ul>
      </el-col>
      <el-col :span="20" class="mb20">
        <finish-table @postData="handlePostData" ref="finishTable" />
      </el-col>
      <!-- <el-col :span="12">
        <big-table @showModal="handleShowModal" ref="bigTable" />
      </el-col>-->
    </el-row>
    <table-modal ref="tableModal" />
  </el-card>
</template>

<script>
import FinishCard from './FinishCard'
import FinishTable from './FinishTable'
import BigTable from './BigTable'
import TableModal from './Modal'
import { finishedDetail } from '@/api/eval'
import { getSession, setSession, removeSession } from '@/utils/util'

export default {
  components: {
    FinishCard,
    FinishTable,
    BigTable,
    TableModal
  },
  data() {
    return {
      mdl: this.$route.params.row || getSession('finishDetailRow'),
      dataArr: [],
      targetArr: []
    }
  },
  async created() {
    const row = this.$route.params.row
    if (row) {
      setSession('finishDetailRow', row)
    }
    if (this.mdl) {
      const res = await finishedDetail(this.mdl.evalPlanId)
      console.log('res', res)
      if (res && res.data.length > 0) {
        this.targetArr = res.data
        if (res.data[0].evalDetailedItemVOList && res.data[0].evalDetailedItemVOList.length > 0) {
          this.$refs.finishTable.show(res.data[0].evalDetailedItemVOList)
        }
      }
    } else {
      this.$message.error('页面发生错误，即将返回列表页')
      setTimeout(() => {
        this.$router.push({
          name: 'evaluateMyPlan'
        })
      }, 100)
    }
  },
  methods: {
    handleClick(row) {
      console.log('row', row)
      this.$refs.finishTable.show(row.evalDetailedItemVOList)
    },
    handlePostData(arr) {
      console.log('index arr', arr)
      this.dataArr = arr
      this.$refs.bigTable.show(arr)
    },
    handleShowModal(arr) {
      this.$refs.tableModal.show(arr)
    }
  },
  destroyed() {
    removeSession('finishDetailRow')
  }
}
</script>

<style>
</style>